<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // replace 替换字符串    exec 字符串值匹配正则值
        //1. replace() 配合exec()  模版引擎简易实现原理
        // var str = '<div>我是{{name}}</div>'
        // var zz = /{{([a-zA-Z]+)}}/
        // var re = zz.exec(str)
        // console.log(re);// ["{{name}}", "name",]
        // console.log(str);//<div>我是{{name}}</div>
        // var newstr = str.replace(re[0], re[1])
        // console.log(newstr);//<div>我是name</div>

        // 2. 手动 多次replace 替换
        // var str = '<div>我是{{name}}今年{{  age  }}岁了</div>'
        // var zz = /{{\s*([a-zA-Z]+)\s*}}/
        // // 第一次匹配
        // var re1 = zz.exec(str)
        // str = str.replace(re1[0], re1[1])

        // // 第二次匹配
        // var re2 = zz.exec(str)
        // str = str.replace(re2[0], re2[1])

        // // 第三次匹配
        // var re3 = zz.exec(str)
        // console.log(re3);//null 字符串中已经没有符合正则的匹配条件的值了 所以为空
        // console.log(str);//<div>我是name今年age岁了</div>  手动全部替换完毕

        // 3.while循环replace 的替换
     

        var str = '<div>我是{{name}}今年{{  age  }}岁了</div>'
        var zz = /{{\s*([a-zA-Z]+)\s*}}/

        // (1)老师做法
        var re = null
        while (re = zz.exec(str)) { // 就是通过exec方法 把字符串中符合 正则规则的内容 提取出来 exec会把提取出来的内容放到数组里  
            str = str.replace(re[0], re[1])  //  最后通过replace 把数组下标0与下标1进行替换 
                                            //   这也许就是模版引擎的实现原理 {{}} 
        }
        console.log(str);

        // (2)我的做法
        // while (zz.exec(str) !== null) {
        //     var re = zz.exec(str)
        //     str = str.replace(re[0], re[1])
        // }
        // console.log(str);







    </script>
</body>

</html>